<template>
	<view class="health-box">
		<view class="customer-service">
			<view class="content-box">
				<text class="title">您的随身智能就医助手</text>
				<view class="fu-title">
					<text>疾病自诊&ensp;</text>|
					<text>&ensp;问药咨询</text>
				</view>
			</view>
			<image src="/图片素材/health/renwu.png" class="cus-ser-img" mode=""></image>
		</view>
		<view class="gird-box">
			<uv-grid :border="false" :col="4">
				<uv-grid-item v-for="(item,index) in navBox" :key="item._id">
					<image :src="item.image" mode=""></image>
					<text class="grid-text">{{item.text}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="healthy-calendar">
			<view class="healthy-title">
				<view class="bgImg">
					<uv-icon name="calendar" size="16" color="#fff"></uv-icon>
					<text>健康日历</text>
				</view>
			</view>
			<view class="ask-everyday">指甲长倒刺是因为缺维生素吗?</view>
			<view class="confirm-box">
				<view :class="['true-box',activeIndex === 1	? 'select-box1':'']" @tap="confirmAsk">
					<text>真的&nbsp;</text>
					<text v-if="activeIndex === 1">68%</text>
				</view>
				<view :class="['false-box',activeIndex === 1 ? 'select-box2':'']" @tap="confirmAsk">
					<text v-if="activeIndex === 1">32%&nbsp;</text>
					<text>假的</text>
				</view>
			</view>
		</view>
		<view class="health-records">
			<view class="records-title">
				<text class="title">健康档案</text>
				<view class="icon-title">
					<uv-icon name="empty-favor" size="16" color="#000"></uv-icon>
					<text>同步华为运动健康数据</text>
				</view>
			</view>
			<scroll-view class="scroll-x" :scroll-x="true">
				<recordBox class="record-item" v-for="(item, index) in healthList" :key="item._id" :list="item" :title="index"></recordBox>
			</scroll-view>
			<view class="records-history">
				<uv-icon name="file-text" color="#5a76af" size="20"></uv-icon>
				<text class="history-text">历史模式</text>
			</view>
		</view>
		<view class="health-assessment">
			<view class="records-title">
				<text class="title">健康评估</text>
				<view class="icon-title">
					<text>更多</text>
					<uv-icon name="arrow-right" size="16" color="#000"></uv-icon>
				</view>
			</view>
			<view class="assessment-top">
				<view class="left-text">
					<text class="h1">甲状腺癌</text>
					<text class="h2">甲状腺癌风险评估</text>
				</view>
				<button class="assessment-button">去评估</button>
			</view>
			<view class="assessment-bottom">
				<view class="assessment left">
					<view class="top-text">
						<text class="h1">乳腺癌</text>
						<text class="h2">乳腺癌风险评估</text>
					</view>
					<button class="assessment-button left-button">去评估</button>
				</view>
				<view class="assessment right">
					<view class="top-text">
						<text class="h1">乳腺癌</text>
						<text class="h2">乳腺癌风险评估</text>
					</view>
					<button class="assessment-button right-button">去评估</button>
				</view>
			</view>
		</view>
		<view class="popular">
			<view class="records-title">
				<text class="title">健康评估</text>
				<view class="icon-title">
					<text>更多</text>
					<uv-icon name="arrow-right" size="16" color="#000"></uv-icon>
				</view>
			</view>
			<uv-tabs lineHeight="0" :activeStyle="{fontSize: '32rpx', color: '#000', fontWeight: 'bold'}" :inactiveStyle="{fontSize:'32rpx',color: '#626262'}" :itemStyle="{height: '88rpx',padding: '0 50rpx 0 0'}" :list="[{name:'推荐'},{name:'疾病科普'},{name:'治疗康复'},{name:'就医攻略'},{name:'用药指导'},{name:'检查手术'},{name:'医生感悟'}]"></uv-tabs>
			<!-- 文章推荐 -->
			<view class="article-recommend">
				<recomArticle v-for="item in articleList" :key="item._id" :list="item"></recomArticle>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getHealthFn, getIconsFn } from '../../api/health';
import { getAllArticlesFn } from '../../api/home';
const navBox = ref([])
// 健康信息
const healthList = ref([])
// 获取文章推荐数组
const articleList = ref([])
onMounted(()=>{
	getIconsFn("health").then(res=>{
		navBox.value = res.data.data
	})
	// 获取健康信息
	getHealthFn('user001').then(res=>{
		healthList.value = res.data.data
	})
	// 文章分享
	getAllArticlesFn().then(res=>{
		articleList.value = res.data.data
	})
})
// 激活选择
const activeIndex = ref(-1)
function confirmAsk () {
	activeIndex.value = 1
}
</script>

<style scoped lang="scss">
	
	.health-box{
		background-color: #f4f5f7;
		padding: 32rpx;
		padding-bottom: 200rpx;
		.customer-service{
			width: 100%;
			margin-bottom: 60rpx;
			height: 228rpx;
			display: flex;
			flex-direction: column-reverse;
			position: relative;
			.cus-ser-img{
				position: absolute;
				left: 20rpx;
				top: 0;
				width: 27%;
				transform: scale(1.2);
				height: 228rpx;
			}
			.content-box{
				width: 100%;
				height: 196rpx;
				border-radius: 30rpx;
				background-image: linear-gradient(90deg, #6da7fd, #3b87f7, #579afc, #64a3fe);
				display: flex;
				flex-direction: column;
				padding-left: 35%;
				.title{
					font-size: 40rpx;
					font-weight: bold;
					color: #fff;
					margin-top: 36rpx;
					margin-bottom: 18rpx;
				}
				.fu-title{
					display: flex;
					color: #ffffffbf;
					font-size: 16rpx;
					align-items: center;
					text{
						font-size: 24rpx
					}
				}
			}
		}
		.gird-box{
			margin-bottom: 50rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}
			.grid-text{
				color: #2b313d;
				font-size: 28rpx;
			}
		}
		.healthy-calendar{
			width: 100%;
			margin-bottom: 20rpx;
			height: 222rpx;
			background-color: #f6f9fe;
			border-radius: 8rpx;
			position: relative;
			padding-top: 80rpx;
			.healthy-title{
				position: absolute;
				top: 0;
				left: 50%;
				width: 198rpx;
				height: 48rpx;
				transform: translateX(-50%);
				.bgImg{
					display: flex;
					height: 48rpx;
					background-color: #8bc846;
					border-bottom-left-radius: 200px;
					border-bottom-right-radius: 200px;
					clip-path: polygon(0 0, 198rpx 0, 178rpx 48rpx, 20rpx 48rpx);
					justify-content: center;
					align-items: center;
					text{
						color: white;
						font-weight: bold;
						font-size: 24rpx;
					}
				}

			}
			.ask-everyday {
				text-align: center;
				font-size: 32rpx;
				color: #2b313d;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.confirm-box{
				padding: 0 40rpx;
				width: 100%;
				height: 56rpx;
				display: flex;
				font-weight: bold;
				font-size: 30rpx;
				color: #fff;
				.true-box{
					flex: 1;
					text-align: center;
					background-color: #8bc846;
					border-top-left-radius: 56rpx;
					border-bottom-left-radius: 56rpx;
					clip-path: polygon(0 0, 100% 0, 90% 56rpx, 0 56rpx);
				}
				.false-box{
					flex: 1;
					text-align: center;
					background-color: #ff7e00;
					border-top-right-radius: 56rpx;
					border-bottom-right-radius: 56rpx;
					clip-path: polygon(10% 0, 100% 0, 100% 56rpx, 0 56rpx);
				}
				.select-box1{
					display: flex;
					align-items: center;
					justify-content: start;
					padding-left: 20rpx;
					font-size: 24rpx;
					font-weight: normal;
					background-color: #afd884;
				}
				.select-box2{
					display: flex;
					justify-content: end;
					align-items: center;
					font-size: 24rpx;
					font-weight: normal;
					padding-right: 20rpx;
					background-color: #fca551;
				}
			}
		}
		.health-records{
			width: 100%;
			margin-bottom: 34rpx;
			height: 478rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			.records-title{
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.title{
					font-weight: bold;
					font-size: 34rpx;
				}
				.icon-title{
					display: flex;
					align-items: end;
					text{
						font-size: 28rpx;
						color: #000;
					}
				}
			}
			.scroll-x{
				width: 100%;
				height: 226rpx;
				margin-bottom: 30rpx;
				white-space: nowrap;
				display: flex;
				.record-item{
					display: inline-block;
					margin-right: 20rpx;
					&:last-child{
						margin-right: 0;
					}
				}
			}
			.records-history{
				width: 100%;
				height: 92rpx;
				background-color: #f5f8ff;
				border-radius: 20rpx;
				padding: 10rpx 15rpx;
				display: flex;
				align-items: center;
				.history-text{
					font-weight: bold;
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}
		}
		.health-assessment{
			width: 100%;
			height: 708rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			.records-title{
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.title{
					font-weight: bold;
					font-size: 34rpx;
				}
				.icon-title{
					display: flex;
					align-items: end;
					text{
						font-size: 28rpx;
						color: #000;
						margin-right: 10rpx;
					}
				}
			}
			.assessment-top{
				width: 100%;
				height: 202rpx;
				background: url(/图片素材/health/bgi/top.png) no-repeat center/cover;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				display: flex;
				justify-content: space-between;
				.left-text{
					display: flex;
					flex-direction: column;
					.h1{
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 18rpx;
					}
					.h2{
						font-size: 24rpx;
						color: #0000009A;
					}
				}
				.assessment-button {
					width: 132rpx;
					height: 56rpx;
					color: #fff;
					background-color: #17a8bb;
					border-radius: 28rpx;
					padding: 0;
					line-height: 56rpx;
					font-size: 28rpx;
					margin: 0;
					margin-top: 40rpx;
				}
			}
			.assessment-bottom{
				margin-top: 30rpx;
				display: flex;
				gap: 30rpx;
				.left{
					background: url(/图片素材/health/bgi/left.png) no-repeat center/cover;
				}
				.right{
					background: url(/图片素材/health/bgi/right.png) no-repeat center/cover;
				}
				.assessment{
					padding: 30rpx 20rpx;
					flex: 1;
					height: 354rpx;
					background-color: pink;
					border-radius: 20rpx;
					.top-text{
						display: flex;
						flex-direction: column;
						.h1{
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 18rpx;
						}
						.h2{
							font-size: 24rpx;
							color: #0000009A;
						}
					}
					.left-button{
						background-color: #ff6672;
					}
					.right-button{
						background-color: #4b8dfb;
					}
					.assessment-button{
						width: 132rpx;
						height: 56rpx;
						color: #fff;
						border-radius: 28rpx;
						padding: 0;
						line-height: 56rpx;
						font-size: 28rpx;
						margin: 0;
						margin-top: 140rpx;
					}
				}
			}
		
		}
		.popular{
			margin-top: 40rpx;
			.records-title{
				display: flex;
				justify-content: space-between;
				.title{
					font-weight: bold;
					font-size: 34rpx;
				}
				.icon-title{
					display: flex;
					align-items: end;
					text{
						font-size: 28rpx;
						color: #000;
						margin-right: 10rpx;
					}
				}
			}
			.article-recommend{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}
	
	}
	
</style>
